<template>
  <!-- 分组管理 -->
  <div class="module_par">
    <div class="module_con">
      <!-- 搜索区域 -->
      <div class="search_box">
        <el-row :gutter="20" class="box_center">
          <el-col>
            <span class="searchTxt">分组名称:</span>
            <el-input
              v-model="searchBox.name"
              autocomplete="off"
              size="small"
              class="searchInp"
            ></el-input>
            <el-button
              type="primary"
              class="searchBtn"
              @click="goSearch()"
              size="small"
              v-if="$requestBtnApi.team.queryBtn"
              >查询</el-button
            >
            <el-button
              type="primary"
              class="searchBtn reditBtn"
              @click="redit()"
              size="small"
              >重置</el-button
            >
            <el-button
              type="primary"
              class="searchBtn reditBtn"
              @click="addData()"
              size="small"
              v-if="this.$requestBtnApi.team.addBtn"
              >新增</el-button
            >
          </el-col>
        </el-row>
      </div>
      <!-- 主体内容 -->
      <div class="table-content">
        <el-table
          :data="tableData"
          border
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            align="center"
            label="#"
          ></el-table-column>
          <el-table-column
            prop="teamName"
            align="center"
            label="催收组名称"
          ></el-table-column>
          <el-table-column
            prop="teamCode"
            align="center"
            label="催收组编码"
          ></el-table-column>
          <el-table-column
            prop="teamCommnet"
            align="center"
            label="催收组描述"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            align="center"
            label="创建时间"
          ></el-table-column>
          <el-table-column
            prop="createUser"
            align="center"
            label="创建人"
          ></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <!-- <a class="table_a" @click="addData(scope.row)"><i class="el-icon-circle-plus-outline"></i>新 增</a> -->
              <a
                class="table_a table_a_left"
                @click="editData(scope.row)"
                v-if="$requestBtnApi.team.editBtn"
              >
                <i class="el-icon-edit"></i>编 辑
              </a>
              <a
                class="table_a table_a_left"
                @click="setUser(scope.row)"
                v-if="$requestBtnApi.team.setBtn"
              >
                <i class="el-icon-setting"></i>设 置
              </a>
              <a
                class="table_a table_a_left table_a_del"
                @click="delData(scope.row)"
                v-if="$requestBtnApi.team.delBtn"
              >
                <i class="el-icon-delete"></i>删 除
              </a>
            </template>
          </el-table-column>
        </el-table>
        <div class="pageBox">
          <el-pagination
            v-show="total > 0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 15, 420]"
            :page-size="tableQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
        <!-- <el-table
          :data="tableData"
          border
          tooltip-effect="dark"
          style="width: 100%"
          row-key="id"
          highlight-current-row
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column type="index" align="center" label="#"></el-table-column>
          <el-table-column prop="roleName" label="角色名称"></el-table-column>
          <el-table-column prop="roleAlias" align="center" label="角色别名"></el-table-column>
          <el-table-column prop="tenantName" align="center" label="所属租户"></el-table-column>
          <el-table-column prop="createUser" align="center" label="创建者"></el-table-column>
          <el-table-column prop="createTime" align="center" label="创建时间"></el-table-column>
          <el-table-column prop="updateUser" align="center" label="修改者"></el-table-column>
          <el-table-column prop="updateTime" align="center" label="修改时间"></el-table-column>
          <el-table-column
            align="center"
            width="230"
            label="操作">
            <template slot-scope="scope">
              <a class="table_a" @click="addData(scope.row)"><i class="el-icon-circle-plus-outline"></i>新 增</a>
              <a class="table_a table_a_left" @click="grantUser(scope.row)"><i class="el-icon-setting"></i>授 权</a>
              <a class="table_a table_a_left" @click="editData(scope.row)"><i class="el-icon-edit"></i>编 辑</a>
              <a class="table_a table_a_left  table_a_del" @click="delData(scope.row)"><i class="el-icon-delete"></i>删 除</a>
            </template>
          </el-table-column>
        </el-table>-->
      </div>
      <!-- 编辑 -->
      <el-dialog title="分组编辑" :visible.sync="dialogEditSta">
        <el-form :model="editList" label-width="100px" ref="groupForm">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="分组名称:" prop="teamName">
                <el-input
                  v-model="editList.teamName"
                  autocomplete="off"
                  size="small"
                  class="searchInp"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分组编码:">
                <el-input
                  v-model="editList.teamCode"
                  autocomplete="off"
                  size="small"
                  class="searchInp"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分组描述">
                <el-input
                  v-model="editList.teamCommnet"
                  autocomplete="off"
                  size="small"
                  class="searchInp"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogEditSta = false" size="small"
            >取 消</el-button
          >
          <el-button type="primary" @click="editYes" size="small"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- 新增 -->
      <el-dialog title="分组新增" :visible.sync="dialogAddSta">
        <el-form :model="addList" label-width="100px" :rules="addRule" ref="addList">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="分组名称" prop="teamName">
                <el-input
                  v-model="addList.teamName"
                  autocomplete="off"
                  size="small"
                  class="searchInp"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分组代码" prop="teamCode">
                <el-input
                  v-model="addList.teamCode"
                  autocomplete="off"
                  size="small"
                  class="searchInp"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="分组描述">
                <el-input
                  v-model="addList.teamCommnet"
                  autocomplete="off"
                  size="small"
                  class="searchInp"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddSta = false" size="small"
            >取 消</el-button
          >
          <el-button type="primary" @click="addYes" size="small"
            >确 定</el-button
          >
        </div>
      </el-dialog>



      <!-- 分组设置 -->
      <el-dialog title="分组设置" :visible.sync="dialogSetSta">
        <el-form :model="setList" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="分组名称">
                <el-input
                  v-model="setList.teamName"
                  autocomplete="off"
                  size="small"
                  class="searchInp"
                  :readonly="true"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-table
                :data="setList.iamUserSet"
                border
                tooltip-effect="dark"
                style="width: 100%"
              >
                <el-table-column
                  prop="userName"
                  align="center"
                  label="分组人员"
                ></el-table-column>
                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <a
                      class="table_a table_a_left table_a_del"
                      @click="delUser(scope.row)"
                    >
                      <i class="el-icon-delete"></i>删 除
                    </a>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col>
              <el-table
                :data="setList.iamUserSet"
                border
                tooltip-effect="dark"
                style="width: 100%"
              >
                <el-table-column
                  prop="userName"
                  align="center"
                  label="添加人员"
                ></el-table-column>
                  <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <a
                      class="table_a table_a_left table_a_del"
                      @click="addUser(scope.row)"
                    >
                      <i class="el-icon-delete"></i>添 加
                    </a>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogSetSta = false" size="small"
            >取 消</el-button
          >
          <el-button type="primary" @click="setYes" size="small"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>

    <!-- 绑定用户 -->
    <BindUser
      v-if="dialogVisible_bindUser"
      :dialogVisible.sync="dialogVisible_bindUser"
      @update="getList"
      :row="row"
    ></BindUser>
  </div>
</template>

<script>
import BindUser from "./components/BindUser";
export default {
  components: {
    BindUser,
  },
  data() {
    return {
      // 按钮权限控制
      permissionList: {
        cx: true,
        xz: true,
        bj: true,
        qx: true,
        xq: true,
      },
      // 搜索区域值
      searchBox: {
        name: "",
      }, // 搜索内容
      tableData: [], // table数据
      total: 0,
      tableQuery: {
        limit: 5,
        indexNo: 0,
      },
      dialogEditSta: false, // 编辑弹框判断
      // 编辑弹框数据
      editList: {
        id: "",
        teamName: "",
        teamCode: "",
        teamType: "",
        teamCommnet: "",
      }, // 编辑弹框数据
      // 搜索状态
      searchSta: false,
      // 新增弹框 状态
      dialogAddSta: false,
      // 设置弹框 状态
      dialogSetSta: false,
      // 新增子  父级数据
      addDataList: null,
      // 新增弹框数据
      addList: {
        teamName: "",
        teamCode: "",
        teamType: "",
        teamCommnet: "",
      },
      // 新增时校验
      addRule: {
        teamName: [
          {
            required:true,
            message: '请输入分组名称',
            trigger: 'blur'
          }
        ],
        teamCode: [
          {
            required:true,
            message: '请输入分组代码',
            trigger: 'blur'
          }
        ],
        teamType: [
          {
            required:true,
            message: '请选择分组类型',
            trigger: 'blur'
          }
        ],
      },
      // 设置弹框数据
      setList: {
        teamName: "",
        users: [],
        addUsers: [],
        rmUsers: [],
      },
      // 编辑 数据
      dataList: {},
      // 编辑弹框状态
      dialogSeeSta: false,
      // 编辑弹框数据
      seeDataList: {
        name: "",
        roleAlias: "",
        user: "",
        option: [],
      },
      dialogGrantSta: false,
      activeName: "first",
      menuPerm: [],
      menuPermOption: [],
      organOption: [],
      apiOption: [],
      defaultProps: {
        children: "children",
        label: "permName",
      },
      defaultProps2: {
        children: "children",
        label: "name",
      },
      defaultProps3: {
        children: "children",
        label: "apiName",
      },
      organList: null,
      interfaceList: null,
      roleId: "",
      typeOptions: [
        {
          label: "催收组",
          value: "0",
        },
        {
          label: "品控组",
          value: "1",
        }
      ],
      dialogVisible_bindUser: false,//设置用户
      row: {},//设置用户
    };
  },
  methods: {
    delUser(val) {
      console.log(val);
      this.setList.iamUserSet.some((item, i) => {
        if (item.id == val.id) {
          this.setList.iamUserSet.splice(i, 1);
          return true;
        }
      });
    },
    addUser(val){
      console.log(val);
      this.setList.iamUserSet.push(val);
    },
    setYes(){
      console.log(this.setList);
      let data = thsi.setList
       this.$requestA[this.$requestBtnApi.role.setUserType](
        this.$requestBtnApi.team.setUserUrl,
        data,
        (res) => {
          if (res.code == "200") {
            this.$message.success("授权成功");
            this.dialogGrantSta = false;
          }
        }
      );

    },
    handleSizeChange(val) {
      console.log(val);
      this.tableQuery.limit = val;
      this.tableQuery.indexNo = 0;
      this.getTableList();
    },
    handleCurrentChange(val) {
      this.tableQuery.indexNo = val - 0 - 1;
      this.getTableList();
    },
    handleClick(val) {
      console.log(val.name);
      if (val.name == "third") {
        this.$alert(
          "接口权限功能开发中。此功能将在下一版本中开放使用",
          "友情提示",
          {
            confirmButtonText: "确定",
            callback: (action) => {},
          }
        );
      }
    },
    // 授权  弹框确定
    getCheckedNodes() {
      const grantGetCheckedNodes = this.$refs.grantTree.getCheckedNodes();
      const grantGetHalfCheckedNodes = this.$refs.grantTree.getHalfCheckedNodes();
      const organGetCheckedNodes = this.$refs.organ.getCheckedNodes();
      // const organGetHalfCheckedNodes = this.$refs.organ.getHalfCheckedNodes();
      const interfaceGetCheckedNodes = this.$refs.interface.getCheckedNodes();
      const interfaceGetHalfCheckedNodes = this.$refs.interface.getHalfCheckedNodes();
      // 菜单权限全选 半选id
      const grantId = grantGetCheckedNodes.map((v) => {
        return v.id;
      });
      const grantId2 = grantGetHalfCheckedNodes.map((v) => {
        return v.id;
      });
      // 数据权限  全选  半选id
      const organId = organGetCheckedNodes.map((v) => {
        return v.id;
      });
      // const organId2 = organGetHalfCheckedNodes.map((v) => {
      //   return v.id;
      // });
      // 接口权限  全选 半选id
      // const interfaceId = interfaceGetCheckedNodes.map((v) => {
      //   return v.id;
      // });
      // const interfaceId2 = interfaceGetHalfCheckedNodes.map((v) => {
      //   return v.id;
      // });
      const data = {
        roleId: this.roleId,
        menuPermList: [...grantId, ...grantId2],
        dataPermList: organId,
        apiPermList: [],
        // apiPermList: [...interfaceId, ...interfaceId2],
      };
      this.$requestA[this.$requestBtnApi.role.grantType](
        this.$requestBtnApi.role.grantUrl,
        data,
        (res) => {
          if (res.code == "200") {
            this.$message.success("授权成功");
            this.dialogGrantSta = false;
          }
        }
      );
    },
    // 设置组中人员
    setUser(val) {
      this.dialogVisible_bindUser = true,
      this.row = val;

    },
    // 回显菜单   数据  接口
    getRolePerm() {
      console.log(typeof null);
      console.log(typeof []);
      this.menuPermOption = [];
      this.organOption = [];
      this.apiOption = [];
      this.$requestA.get("/IAM/role/" + this.roleId, {}, (res) => {
        const menuPerm = res.data.menuPerm;
        const dataPerm = res.data.dataPerm;
        const apiPerm = res.data.apiPerm;
        this.dialogGrantSta = true;
        var me = this.getRecursion(menuPerm, this.menuPerm);
        // var da = this.getRecursion2(dataPerm, this.organList);
        // var ap = this.getRecursion3(apiPerm, this.interfaceList);
        this.$nextTick(() => {
          this.$refs.grantTree.setCheckedNodes([]);
          this.$refs.grantTree.setCheckedNodes(me);
          this.$refs.organ.setCheckedNodes([]);
          this.$refs.organ.setCheckedNodes(dataPerm);
          // this.$refs.interface.setCheckedNodes([]);
          // this.$refs.interface.setCheckedNodes(ap);
        });
      });
    },
    // 菜单权限
    getRecursion(list, parList) {
      for (const key1 in list) {
        for (const key2 in parList) {
          if (list[key1].id == parList[key2].id) {
            if (list[key1].children) {
              this.getRecursion(list[key1].children, parList[key2].children);
            } else {
              this.menuPermOption.push(list[key1]);
            }
          }
        }
      }
      return this.menuPermOption;
    },
    // 数据权限
    getRecursion2(list, parList) {
      for (const key1 in list) {
        for (const key2 in parList) {
          if (list[key1].id == parList[key2].id) {
            if (list[key1].children.length) {
              this.getRecursion2(list[key1].children, parList[key2].children);
            } else {
              this.organOption.push(list[key1]);
            }
          }
        }
      }
      return this.organOption;
    },
    // 接口权限
    getRecursion3(list, parList) {
      for (const key1 in list) {
        for (const key2 in parList) {
          if (list[key1].id == parList[key2].id) {
            if (list[key1].children) {
              this.getRecursion3(list[key1].children, parList[key2].children);
            } else {
              this.apiOption.push(list[key1]);
            }
          }
        }
      }
      return this.apiOption;
    },
    // 删除table数据
    delData(val) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$requestA[this.$requestBtnApi.team.delType](
            this.$requestBtnApi.team.delUrl + "/" + val.id,
            {},
            (res) => {
              if (res.code == "200") {
                this.$message.success("删除成功");
              }
              this.getTableList();
            }
          );
        })
        .catch(() => {});
    },
    // 查看详情
    seeData(data) {
      this.seeDataList = {
        name: "",
        roleAlias: "",
        user: "",
        option: [],
      };
      this.seeDataList.name = data.roleName;
      this.seeDataList.roleAlias = data.roleAlias;
      this.seeDataList.user = data.tenantCode;
      this.dialogSeeSta = true;
      // this.getSeeDataList(data.id)
    },
    // 新增按钮
    addData(val) {
      if (val) {
        this.addDataList = val;
      } else {
        this.addDataList = null;
      }
      this.dialogAddSta = true;
      let formName = "addList"
      this.$refs[formName].resetFields();

    },
    // 重置
    redit() {
      this.tableQuery.limit = 5;
      this.tableQuery.indexNo = 0;
      this.searchBox.name = "";
      this.searchSta = false;
      this.getTableList();
    },
    // 搜索
    goSearch() {
      this.tableQuery.limit = 5;
      this.tableQuery.indexNo = 0;
      this.searchSta = true;
      this.getTableList();
    },
    // 新增确定
    addYes() {
      this.$refs.addList.validate((valid) => {
        if (valid) {
          const data = {
            teamName: this.addList.teamName,
            teamCode: this.addList.teamCode,
            teamCommnet: this.addList.teamCommnet,
            createUser: localStorage.getItem("User_Name"),
            teamType: '0'
          };
          this.$requestA[this.$requestBtnApi.team.addType](
            this.$requestBtnApi.team.addUrl,
            data,
            (res) => {
              this.dialogAddSta = false;
              this.getTableList();
              if (res.code == "200") {
                this.$message.success("操作成功");
              }
            }
          );
        }
      })

    },
    // 编辑确定
    editYes() {
      if (this.editList.teamName.trim() == "") {
        this.$message.error("请输入分组名称");
        return false;
      }
      const data = this.dataList;
      data.teamName = this.editList.teamName;
      data.teamCode = this.editList.teamCode;
      data.teamCommnet = this.editList.teamCommnet;
      data.updateUser = localStorage.getItem("User_Name");
      data.teamType = 0;
      console.log(data);
      this.$requestA[this.$requestBtnApi.team.editType](
        this.$requestBtnApi.team.editUrl,
        data,
        (res) => {
          this.dialogEditSta = false;
          this.getTableList();
          if (res.code == "200") {
            this.$message.success("操作成功");
          }
        }
      );
    },
    // 编辑按钮
    editData(data) {
      this.dataList = data;
      this.editList.id = data.id;
      this.editList.teamName = data.teamName;
      this.editList.teamCode = data.teamCode;
      this.editList.teamCommnet = data.teamCommnet;
      this.editList.teamType = data.teamType;
      this.dialogEditSta = true;
    },
    //   获取table数据
    getTableList() {
      const data = {
        loginCode: localStorage.getItem("loginCode"),
        tenantCode: localStorage.getItem("TENANT_CODE"),
        teamName: this.searchSta ? this.searchBox.name : "",
        size: this.tableQuery.limit,
        page: this.tableQuery.indexNo,
        teamType: 0
      };
      this.$requestA[this.$requestBtnApi.team.queryType](
        this.$requestBtnApi.team.queryUrl,
        data,
        (res) => {
          console.log(res);
          this.tableData = res.data.content;
          this.total = res.data.totalElements;
        }
      );
    },
    // 获取当前所有租户
    getAllZh() {
      this.addList.optionTent = [];
      this.editList.optionTent = [];
      this.$requestA.get(
        "/IAM/tenant/queryTenant",
        {
          tenantCode: localStorage.getItem("TENANT_CODE"),
        },
        (res) => {
          for (const key in res.data) {
            this.addList.optionTent.push({
              value: res.data[key].tenantCode,
              label: res.data[key].tenantName,
            });
            this.editList.optionTent.push({
              value: res.data[key].tenantCode,
              label: res.data[key].tenantName,
            });
            this.seeDataList.option.push({
              value: res.data[key].tenantCode,
              label: res.data[key].tenantName,
            });
          }
        }
      );
    },
    // 获取菜单权限
    getMenuGrant(val) {
      const data = {
        loginCode: localStorage.getItem("loginCode"),
        permType: "1",
      };
      this.$requestA.get("/IAM/permission/tree", data, (res) => {
        this.menuPerm = res.data;
        this.getOrgan(val);
      });
    },
    // 获取数据权限
    getOrgan(val) {
      const data = {
        tenantCode: val.tenantCode,
      };
      this.$requestA.get("/IAM/organ/dataPrem", data, (res) => {
        this.organList = res.data;
        this.getInterface();
      });
    },
    // 获取接口权限
    getInterface() {
      this.$requestA.get(
        "/interface",
        {
          permType: "2",
        },
        (res) => {
          this.interfaceList = res.data;
          this.getRolePerm();
        }
      );
    },
  },
  created() {
    this.$route.meta.menuList.map((item) => {
      console.log(item);
      if (item.eleName == "查询") {
        this.$requestBtnApi.role.queryUrl = item.eleUrl;
        this.$requestBtnApi.role.queryType =
          item.operType == "delete" ? "dele" : item.operType;
        this.$requestBtnApi.role.queryBtn = true;
      } else if (item.eleName == "新增") {
        this.$requestBtnApi.role.addUrl = item.eleUrl;
        this.$requestBtnApi.role.addType =
          item.operType == "delete" ? "dele" : item.operType;
        this.$requestBtnApi.role.addBtn = true;
      } else if (item.eleName == "编辑") {
        this.$requestBtnApi.role.editUrl = item.eleUrl;
        this.$requestBtnApi.role.editType =
          item.operType == "delete" ? "dele" : item.operType;
        this.$requestBtnApi.role.editBtn = true;
      } else if (item.eleName == "删除") {
        this.$requestBtnApi.role.delUrl = item.eleUrl;
        this.$requestBtnApi.role.delType =
          item.operType == "delete" ? "dele" : item.operType;
        this.$requestBtnApi.role.delBtn = true;
      } else if (item.eleName == "授权") {
        this.$requestBtnApi.role.grantUrl = item.eleUrl;
        this.$requestBtnApi.role.grantType =
          item.operType == "delete" ? "dele" : item.operType;
        this.$requestBtnApi.role.grantBtn = true;
      }
    });
    // this.getMenuGrant();
    this.getAllZh();
    this.getTableList();
    // this.getOrgan();
    // this.getInterface();
  },
};
</script>
<style>
.grant_dia {
  width: 30% !important;
}

.grant_dia .el-tabs__content {
  min-height: 50vh;
  max-height: 50vh;
  overflow-y: scroll;
}

/*修改滚动条样式*/
.grant_dia .el-tabs__content::-webkit-scrollbar {
  width: 6px;
  height: 100%;
}

.grant_dia .el-tabs__content::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}

.grant_dia .el-tabs__content::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}

.grant_dia .el-tabs__content::-webkit-scrollbar-thumb:hover {
  background: #333;
}

.grant_dia .el-tabs__content::-webkit-scrollbar-corner {
  background: #179a16;
}
</style>
<style scoped>
@import "../../assets/css/base.css";

.search_box {
  background: #fff;
  border-radius: 5px;
  padding: 40px 40px 60px 40px;
  margin: 0 0 20px 0;
}

.pageBox {
  display: flex;
  width: 100%;
  justify-content: left;
  margin-top: 10px;
}

.box_center {
  text-align: left;
}

.searchBtn {
  margin-left: 80px;
}

.reditBtn {
  margin-left: 20px;
}
</style>
